<template>
  <div>
    <div class="now_page_title">
      <div class="left_box">
        <svg-icon :icon-class="routerInfo.meta.icon"></svg-icon>
        <span class="metaTitle">{{ routerInfo.meta.title }}</span>
        <div class="breadcrumb_boxs">
          <div v-for="(item, index) in breadList" :key="item.id">
            <div v-if="breadList.length < 4" :class="{ text_color: index == breadList.length - 1 }">
              <span class="icon_class">/</span>
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span class="breadcrumb_box_item" @click="breadRouterClick(item)">{{ item.label }}</span>
              </el-tooltip>
            </div>
            <div v-else :class="{ text_color: index == breadList.length - 1 }">
              <div v-if="index == 0">
                <span class="icon_class">/</span>
                <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                  <span class="breadcrumb_box_item" @click="breadRouterClick(item)">{{ item.label }}</span>
                </el-tooltip>
              </div>
              <div v-if="index >= breadList.length - 2">
                <span v-if="index == breadList.length - 2" class="icon_class">/ &nbsp; ... &nbsp;/</span>
                <span v-if="index == breadList.length - 1" class="icon_class">/</span>
                <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                  <span class="breadcrumb_box_item" @click="breadRouterClick(item)">{{ item.label }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="btn_box" v-if="isShowAdd"></div>

      <slot v-else></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const routerInfo = ref(null);

const props = defineProps({
  pageType: {
    //enterprise:企业,team:团队,self:个人
    type: String,
    default: ''
  },
  treeNodeRow: {
    type: Object,
    default: () => {
      return {};
    }
  },
  // 新建按钮 true 存在
  isShowAdd: {
    type: Boolean,
    default: true
  },

  breadList: {
    type: Array as any,
    default: () => {
      return [];
    }
  }
});

const route = useRoute(); // 获取当前的路由信息

watch(
  route,
  (to, from) => {
    routerInfo.value = to;
  },
  { deep: true, immediate: true } // 深度监听并立即执行一次
);

const emit: any = defineEmits(['breadRouterClick']);
/**面包屑点击事件 */
const breadRouterClick = (item) => {
  emit('breadRouterClick', item);
};
</script>
<style scoped lang="scss">
.now_page_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  .left_box {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 15px;
  }
  .metaTitle {
    margin-left: 8px;
    color: #333;
  }
  .btn_box {
    display: flex;
    align-items: center;
  }
  .create_box {
    margin-right: 10px;
    :deep(.el-button--primary) {
      background-color: #6698ff;
      border-color: #6698ff;
    }

    :deep(.el-button--primary:focus) {
      box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
      background-color: #6698ff !important;
      border-color: #6698ff !important;
      color: #fff !important;
    }
    :deep(.el-button--primary:hover) {
      box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
      background-color: #6698ff !important;
      border-color: #6698ff !important;
      color: #fff !important;
    }
    :deep(.el-button:focus),
    :deep(.el-button:hover) {
      color: #6698ff;
      border-color: #6698ff;
      background-color: rgba(102, 152, 255, 0.1);
    }
    .el-button.is-disabled {
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
      background-color: #fff;
      border-color: #ebeef5;
    }
    .el-button--primary.is-disabled {
      color: #fff !important;
      background-color: #94b7fd !important;
      border-color: #94b7fd !important;
      &:hover {
        box-shadow: none !important;
      }
    }
  }
  .create_text {
    margin: 0 8px;
  }
}
.create_row {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 16px;
  width: 220px;
  padding: 6px 16px !important;
  span {
    font-size: 14px;
    margin-left: 8px;
    color: #333 !important;
  }
  &:hover {
    background-color: #f5f5f5 !important;
    color: #999;
  }
}
.create_row_bottom {
  border-top: 1px solid #f5f5f5;
}
.breadcrumb_boxs {
  width: calc(100vw - 920px);
  display: flex;
  align-items: center;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  color: #999;
  .text_color {
    color: #333;
  }
  .icon_class {
    margin-left: 5px;
  }
  .breadcrumb_box_item {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
}
</style>
